<template>
	<div>
		<el-container>
			<el-main>
				<el-row>
					<el-col :span="13" :offset="3" style="border:1px solid #0068db">
						<el-header> 修改密码 </el-header>
						<el-main>
							<el-row>
								<el-col :span="5" class="password">原密码</el-col>
								<el-col :span="19">
									<el-input placeholder="请输入" v-model="mes.passWord" clearable
										@keyup.enter.native="confirm">
									</el-input>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="5" class="password">学号</el-col>
								<el-col :span="19">
									<el-input placeholder="请输入" v-model="mes.id" clearable
										@keyup.enter.native="confirm">
									</el-input>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="5" class="password">新密码</el-col>
								<el-col :span="19">
									<el-input placeholder="请输入" v-model="mes.newPassWord" clearable
										@keyup.enter.native="confirm">
									</el-input>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="5" class="password">确定密码</el-col>
								<el-col :span="19">
									<el-input placeholder="请输入" v-model="nPassWord" clearable
										@keyup.enter.native="confirm">
									</el-input>
								</el-col>
							</el-row>
							<el-row>
								<span style="color: red" v-show="showF">密码不一致</span>
							</el-row>
							<el-row>
								<el-col :span="12">
									<el-button type="primary" style="width:99%" @click="confirm">确定</el-button>
								</el-col>
								<el-col :span="12" style="">
									<el-button type="primary" onclick="window.history.go(-1)" style="width:99%">取消
									</el-button>
								</el-col>
							</el-row>
						</el-main>
					</el-col>
				</el-row>
			</el-main>
		</el-container>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				mes: {
					passWord: "",
					id: "",
					newPassWord: "",
				},
				nPassWord: "",
				showF: false
			};
		},
		methods: {
			confirm() {
				if (this.mes.newPassWord != this.nPassWord) {
					this.showF = true
				} else {
					this.$axios({
						method: "post",
						data: JSON.stringify(this.mes),
						url: "/updateStudentPassWord",
						headers: {
							"Content-Type": "application/json"
						},
					}).then((res) => {
						if (res.data.code == 200) {
							this.$notify({
								title: '成功',
								message: '请继续操作',
								type: 'success'
							});
							this.$router.push({
								name: "userLogin",
							});
						} else {
							alert("原密码或学号错误")
						}

					}).catch((e) => {
						console.log(e);
					});
				}

			}
		}
	};
</script>

<style scoped>
	.el-header {
		background-color: #0068db;
		color: #333;
		line-height: 60px;
		text-align: center;
		font-size: 20px;
	}

	.el-row {
		margin-bottom: 0.9375rem;
	}

	.password {
		background-color: #0068db;
		text-align: center;
		font-size: 20px;
		padding: 7px;
		color: white;
	}
</style>
